<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="../css/class.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.4.min.css">
<link rel="stylesheet" href="jqm-demos.css">
<link rel="stylesheet" href="swipe-page.css">
<script src="../scripts/jquery-2.0.3.min.js"></script>
<script src="../scripts/jquery.mobile-1.4.4.js"></script>
<script>
	
	function navprev(prev) {
		$( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
			transition: "slide",
			reverse: true
		});
	}
	
	function navnext(next) {
		$( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", {
			transition: "slide"
		});
	}
	
    $( document ).one( "pagecreate", "#page", function() {
    	$( document ).on( "swipeleft", ".ui-page", function( event ) {
    		var next = $( this ).jqmData( "next" );
    		navnext(next);
    	});

    	$( document ).on( "swiperight", ".ui-page", function( event ) {
    		var prev = $( this ).jqmData( "prev" );
    		navprev(prev);
    	});
    });
</script>

<style type="text/css">
body {
	background: white;
	color: black;
}

div{
	border:1px solid #aaa;
	margin:5px;
}
</style>

</head>

<body>
<div id="page" data-role="page" data-prev="1" data-next="2">
	<div>
		<div id="main" style="width:500px; height:300px"></div>
	  	<div style="width:500px;height:80px;">
	        <div class="fl" style="width:400px; height:50px"></div>
	        <div class="fr" style="width:50px; height:50px"></div>
	    </div>
	</div>
</div>
</body>
</html>
